/*
 * @Title: 群聊模块
 * @Created by: gsjPC 
 */
<template>
	<view class="tab-chat-content">
		<!-- <uni-swipe-action 
			v-for="group in groupChatList"
			:key="group.id"
			:options="swiperOption" 
			@change="bindSwiperChange(group.id)"
			@click="bindSwiperClick"> -->
			<view 
				v-for="group in groupChatList"
				:key="group.id"
				class="tab-chat-content-item"  
				@tap="goGroupChartView" >
				<view class="tab-chat-content-item-left">
					<image class="tab-chat-content-item-left-avatar" src="/static/groupTouxiang.png" mode=""></image>
					<view class="groupTouxiang">
						<!-- <image src="/static/chat_avatar_corner.png" mode=""></image> -->
					<!-- 	<text>5</text> -->
					</view>
				</view>
				
				<view class="tab-chat-content-item-right">
					<view class="groupName">
						<text>{{ group.name }}</text>
					</view>
				</view>

				<!-- 免打扰图标 -->
				<view v-if="group.ifNoNoise" class="noNoise iconfont">
					&#xe60f;
				</view>
			</view>
		<!-- </uni-swipe-action> -->
	</view>
</template>

<script>
	// import uniSwipeAction from '@/components/uni-swipe-action-origin/uni-swipe-action.vue'
	var utils = require('@/common/util.js');
	export default{
		data(){
			return{
				groupChatList: [],
				// swiperOption: [{
				// 	text: '置顶',
				// 	style: {
				// 		backgroundColor: '#007aff'
				// 	}
				// }, {
				// 	text: '删除',
				// 	style: {
				// 		backgroundColor: '#dd524d'
				// 	}
				// }],
				// curHandleId: '' // 当前右滑的组 id
			}
		},
		components:{
			// uniSwipeAction
		},
		mounted() {
			this.initGroupChatList();
		},
		methods:{
			initGroupChatList() {
				console.log('初始化群数据');
				
				this.groupChatList = Object.keys(Array.apply(null,{length: 3})).map((v,i) => {
					let ifNoNoise = utils.randomNumber(1, 10) > 5;
					return { id: v, isSwipOpen: false, name: 'Dave群体' +v, ifNoNoise}
				});
			},
			// bindSwiperChange(id) {
			// 	this.curHandleId = id;
			// },
			// bindSwiperClick(e) {
			// 	// console.log(arguments);
			// 	// return;
			// 	let clickText = e.content.text,
			// 		id = this.curHandleId,
			// 		index;
			// 	this.groupChatList.forEach( (chat, ind) => {
			// 		if(chat.id == id){
			// 			index = ind;
			// 		}
			// 	});
			// 	console.log(`删除的 id是第 ${index} 个`)
			// 	switch(clickText) {
			// 		case '置顶':
			// 			console.log('置顶');
			// 			this.groupChatList.unshift(this.groupChatList.splice(index, 1)[0])
			// 			break;
			// 		case '删除':
			// 			this.groupChatList.splice(index,1);
			// 			console.log('删除');
			// 			break;
			// 	};
			// 	console.log(this.groupChatList);
			// },
			goGroupChartView(){
				uni.navigateTo({
					url:'/pages/lvyouquan/groupChartView'
				})
			}
		}
	}
</script>

<style>
	.tab-chat-content {
		width:100%;
		overflow: hidden;
	}
	.tab-chat-content-item {
		height: 90upx;
		display: flex;
		align-items: center;
		margin-bottom: 50upx;
		position: relative;
	}

	.noNoise {
		width: 40upx;
		height: 40upx;
		position: absolute;
		top: 0;
		bottom: 0;
		right: 15upx;
		margin: auto;
		color: #DDDEDE;
	}
	
	.tab-chat-content-item-left {
		width: 90upx;
		height: 90upx;
		box-shadow: 0 0 5upx 5upx rgba( 0, 0, 0, .1);
		margin-right: 20upx;
		flex-shrink: 0;
		position: relative;
	}
	
	.groupTouxiang {
		position: absolute;
		right: 0;
		top: 0;
		width: 80upx;
		height: 80upx;
		display: flex;
		justify-content: flex-end;
		align-items: flex-start;
		padding: 0upx 4upx 0 0;
	}
	
	.groupTouxiang image {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}
	
	.tab-chat-content-item-left-corner text {
		color: #fff;
		z-index: 50;
		font-size: 20upx;
		line-height: 1.3;
	}
	
	.tab-chat-content-item-left-avatar {
		width: 100%;
		height: 100%;
	}
	
	.tab-chat-content-item-right {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	
	.groupName {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 18upx;
	}
	
	.groupName text{
		font-size: 28upx;
		color: #272222;
	}
</style>
